<script>
import request from '@/utils/request'

export default {
  props: {
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      depId: '',
      options: []
    }
  },
  watch: {
    value: {
      handler(val) {
        this.depId = val
      },
      immediate: true
    }
  },
  created() {
    this.getOpts()
  },
  methods: {
    change(val) {
      this.$emit('input', val)
    },
    async getOpts() {
      const params = { parentId: '-1' }
      const option = { url: '/system/sysDept/getDepTreeList', method: 'post', data: params }
      const { data } = await request(option)
      this.options = data
    }
  }
}
</script>

<template>
  <div class="slt-from-dep-tree">
    <el-cascader
      v-model="depId"
      placeholder="请选择部门"
      :options="options"
      style="width: 100%;"
      :props="{
        checkStrictly: true,
        value: 'id',
        emitPath: false
      }"
      clearable
      @change="change"
    />
  </div>
</template>


<style scoped lang="scss">
.slt-from-dep-tree {
  display: inline-block;
  width: 400px;
  margin-bottom: 5px;
}
</style>
